<template>
  <div class="follow">
    <div class="app-search">
      <div class="app-search-wrapper">
        <input type="text" class="input-text" placeholder="搜索直播间" />
      </div>
    </div>
    <div class="follow-wrapper">
      <ul class="follow-list">
        <li class="follow-item">
          <div class="media relative">
            <div class="media-object pull-left"><img src="./img/giver_logo.jpg" alt=""></div>
            <div class="media-body over-hidden">
              <div class="media-body-inner">
                <h3 class="media-heading">大鱼艺术教育</h3>
                <p class="media-desc">任何伟大的旅程，都始于脚下的一小步</p>
              </div>
            </div>
            <i class="icon van-icon van-icon-arrow"></i>
          </div>
        </li>
        <li class="follow-item">
          <div class="media relative">
            <div class="media-object pull-left"><img src="./img/giver_logo.jpg" alt=""></div>
            <div class="media-body over-hidden">
              <div class="media-body-inner">
                <h3 class="media-heading">大鱼艺术教育</h3>
                <p class="media-desc">任何伟大的旅程，都始于脚下的一小步</p>
              </div>
            </div>
            <i class="icon van-icon van-icon-arrow"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.follow {
  height: calc(100% - 98px);
}
.app-search {
  font-size: 0;
  background-color: #f8f8f8;
  .app-search-wrapper {
    width: 640px;
    padding: 20px 0;
    margin: 0 auto;
  }

  .input-text {
    width: 100%;
    height: 60px;
    padding: 0 60px;
    font-size: 24px;
    line-height: 60px;
    background-color: #eceded;
    border-radius: 30px;
  }
}

.follow-wrapper {
  height: calc(100% - 100px);
  background-color: #fff;
}

.follow-list {
  padding: 0 35px;
}


.follow-item {
  
  .media {
    padding: 24px 0;
    position: relative;
    &:after {
      display: block;
      content: '';
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #f0f0f0;
    }

    &:last-child {
      .media:after { display: none; }
    }

    .icon {
      font-size: 32px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

  }
  .media-object {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 100%;
  }

  .media-heading {
    font-size: 28px;
    color: #333;
  }

  .media-desc {
    font-size: 24px;
    color: #999;
  }

  .media-body {
    display: flex;
    align-items: center;
    line-height: 1.5; 
  }
}
</style>